<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <script src="../../js/load.js"></script>
</head>

<body>
<div class="layui-fluid">
    <div class="flexrow">
        <div class="layui-panel list-container">
            <div class="list-search-container">
                <div class="list-search-item">
                    <span style="width:100px">服务名称：</span>
                    <input id="serviceName" autocomplete="off" class="layui-input">
                </div>
                <button class="layui-btn layui-btn-sm" style="margin-left:5px" onclick="BindTableData()"><i class="layui-icon layui-icon-search layui-font-12"></i>搜索</button>
            </div>
            <table class="layui-table" lay-data="{id: 'datagrid',height:'full',limit:15}" lay-filter="datagrid">
                <thead>
                <tr>
                    <th lay-data="{field:'serviceName'}">服务名称</th>
                    <th lay-data="{width:100, align:'center',toolbar: '#status'}">服务状态</th>
                    <th lay-data="{fixed: 'right', width:100, align:'center', toolbar: '#op'}">操作</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/html" id="status">
    {{#  if(d.serviceStatus=='STOPPED'){ }}
    <span style="color:#FF5722">已停止</span>
    {{#  } }}
    {{#  if(d.serviceStatus=='RUNNING'){ }}
    <span style="color:#5FB878">运行中</span>
    {{#  } }}
</script>
<script type="text/html" id="op">
    {{#  if(d.serviceStatus=='STOPPED'){ }}
    <button class="layui-btn layui-btn-sm" lay-event="HandleStart">开启服务</button>
    {{#  } }}
    {{#  if(d.serviceStatus=='RUNNING'){ }}
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="HandleStop">停止服务</button>
    {{#  } }}
</script>
<script>
    $(function () {
        BindTableData();
    })

    function BindTableData() {
        var param = {
            serviceName: $("#serviceName").val()
        }
        BindTable("datagrid", "api/service/list", param, null, true);
    }


    function HandleStart(RowData) {
        var param = {
            serviceName: RowData.serviceName
        }
        HttpPost(JSON.stringify(param), 'api/service/start', function (result) {
            if (result.code == 0) {
                OpenSuccessMessage("启动成功")
                BindTableData();
            } else {
                OpenFail(result.msg);
            }
        })
    }

    function HandleStop(RowData) {
        var param = {
            serviceName: RowData.serviceName
        }
        HttpPost(JSON.stringify(param), 'api/service/stop', function (result) {
            if (result.code == 0) {
                OpenSuccessMessage("停止成功")
                BindTableData();
            } else {
                OpenFail(result.msg);
            }
        })
    }

</script>